<template>
    <div class="second_level_page sale_statistics_page">
        <section class="tab_section">
            <div class='tab active'>详情</div>
           
        </section>
        <section class="statistics_main">
            <ul class="choose_time">
                <li  :class="this.flagTime===1? 'active':''" >
                    <div >今天</div>
                </li>
                <li :class="this.flagTime===2? 'active':''">
                    <div >本月</div>
                </li>
                <li  :class="this.flagTime===3? 'active':''">
                    <div >上月</div>
                </li >
                <li :class="this.flagTime===4? 'active':''">
                   <div >自定义时间段</div>
                </li>
            </ul>
            <div class="text">
                <div class="left" style="color:#333333;font-size:.3rem">时间段:{{startAndEnd(this.startTime,this.endTime)}}</div>
            </div>
            
             <div  class="table" >
                <div class="row head_row">
                    <div class="cell">店铺名</div>
                    <div class="cell">交易量/退货量(件)</div>
                    <div class="cell">交易额/退货额(元)</div>
                </div>
                <div class="row head_row" v-for="todo in this.sellers">
                    <div class="cell" id="changeBig" @touchstart="changeBig({todo,$event})" @touchend="changeSmall({todo,$event})" >{{sellerName(todo)}}</div>
                    <div class="cell">{{buyAndReturnCount(todo)}}</div>
                    <div class="cell">{{buyAndReturnMoney(todo)}}</div> 
                </div>
               
            </div>
            
        </section>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div> 
</template>

<script>           
    /*import 'src/plugins/lCalendar.js'
    import 'src/style/lCalendar.css'*/
    import {mapState} from 'vuex'
    import {cateDetails} from 'src/service/getData'
    import {fmoney} from 'src/config/mUtils'

    export default {
        data(){
            return{
                token:'',
                flagTime:1,//日期标记1.今天 2.本月 3.上一月
                startTime : '',
                endTime : '',
                cateId:'',//商品id
                sellers :[],//所有商家
            }
        },
        mounted(){
           
            this.initData();
        },
        components: {
        }, 
        computed:{
        ...mapState([
            'userInfo',
            ])
        },        
        methods:{
        /*...mapMutations([
           'SAVE_AVANDER'
        ]),*/
         fmoney(s, n){
            return fmoney(s, n)
        },
        sellerName(todo){
            if(!todo.BusinessName||todo.BusinessName=='')
                return "无名称";
            else
            {
                if(todo.BusinessName.length>=5)
                {
                    return todo.BusinessName.substring(0,5)+"...";
                }
                else
                {
                    return todo.BusinessName;
                }   
            }
        },
        buyAndReturnCount(todo){
            let buyNum = 0;
            let returnNum = 0;

            if(!todo.buyNum||todo.buyNum==0)
                buyNum = "0"
            else
                buyNum = todo.buyNum;
            if(!todo.returnNum||todo.returnNum==0)
                returnNum = "0";
            else
                returnNum = todo.returnNum;
            return buyNum+"/"+returnNum;
        },
        buyAndReturnMoney(todo){
            let buyMoney = 0;
            let returnMoney = 0;

            if(!todo.buyMoney||todo.buyMoney==0)
                buyMoney = "0.00"
            else
                buyMoney = fmoney(todo.buyMoney,2);
            if(!todo.returnMoney||todo.returnMoney==0)
                returnMoney = "0.00";
            else
                returnMoney = fmoney(todo.returnMoney,2);
            return buyMoney+"/"+returnMoney;
        },
        startAndEnd(startTime,endTime){
            if(startTime==''||endTime=='')
                return '';
            else
                return startTime+"——"+endTime;
        },
        initData(){
            console.log("init");
            if(this.$route.query.startTime)
                this.startTime = this.$route.query.startTime;
            if(this.$route.query.endTime)
                this.endTime = this.$route.query.endTime;
            if(this.$route.query.flagTime)
                this.flagTime = this.$route.query.flagTime;
            if(this.$route.query.cateId)
                this.cateId = this.$route.query.cateId;
            console.log ("cateId:"+this.cateId) ;
            console.log ("flagTime:"+this.flagTime) ;            
            console.log ("endTime:"+this.endTime) ;
            console.log ("startTime:"+this.startTime) ;
            console.log(this.$route.query.token+"token");
            if(this.$route.query.token)
            {
                this.token = this.$route.query.token;
            }
            else
            {
                this.token=this.userInfo.token;
            }
            this.cateDetails();
        },
        async  cateDetails(){
            let response = await cateDetails(this.token,this.startTime,this.endTime,this.flagTime,this.cateId);
            this.sellers = response.data;
        },
        changeBig(todo){
            // 手指触摸的同时将商品完整名称显示并实现放大效果
              todo.$event.target.innerText = todo.BusinessName;
              todo.$event.target.style.height = ".9rem" 
              todo.$event.target.style.lineHeight = ".32rem" 
              todo.$event.target.style.zoom = "1.1" 
               
        },
        changeSmall(todo){
            // 手指移开的同时商品名和样式还原
             todo.$event.target.innerText= todo.BusinessName.substring(0,5)+"..."
             todo.$event.target.style.height = "inherit"
             todo.$event.target.style.zoom = "1"
        }
    },
    watch: {
        $route: function (value){
            if (this.$route.query.startTime) {
              this.initData();
            }
        }
    }
}
</script>

<style lang="scss" scoped="">
    @import 'src/style/mixin';    

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.32rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .statistics_main{
        margin-top: 1.08rem;
        background: #fff;
        .choose_time{
            padding: .4rem .48rem;
            li{
                float: left;
                @include wh(.92rem, .4rem);
                margin-right: .56rem;
                div{
                    @include wh(100%, 100%);
                    @include sc(.3rem, $blue);
                    text-align: center;
                    border-radius: .2rem;
                }
            }
            li:last-child{
                margin-right: 0;
                width: 2.1rem;
            }
            li.active{
                div{
                    background: $blue;
                    color: #fff;
                }
            }
        }
        .text{
            padding: .4rem .48rem 0;
            div{
                @include sc(.26rem, #666);
            }
        }
        .table{
            padding: .58rem .24rem .52rem;
            .row{
                display: flex;
                margin-bottom: .4rem;
                .cell{
                    flex: 1;
                    @include sc(.28rem, #333);
                    text-align: center;
                    height: .28rem;
                    line-height: .28rem;
                }
            }
            .head_row{
                margin-bottom: .32rem;
                .cell{
                    color: #666;
                }
            }
            .footer_row{
                margin-top: .02rem;
                margin-bottom: 0;
                .cell{
                    color: #c8574b;
                }
            }
        }
    }
</style>
